<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link type="text/css" rel="stylesheet" th:href="@{/css/all.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/plugin/zTree_v3-master/css/metroStyle/metroStyle.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css}"/>
<!--
    <script language="JavaScript" th:src="@{/js/all.js}" src="js/all.js"></script>
-->

    <script language='JavaScript' th:src='@{/plugin/jQuery/jQuery-2.2.0.min.js}'></script>
    <script language='JavaScript' th:src="@{/ajax/layer/layer.min.js}"></script>
    <script language='javascript' th:src='@{/js/constant.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/jQuery/jquery.mousewheel.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/jquery-easyui-1.5.1/jquery.easyui.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/bootstrap/js/bootstrap.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/bootstrap-table/bootstrap-table.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/adminLTE/js/app.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/lobibox/dist/js/lobibox.js}'></script>
    <script language='JavaScript' th:src='@{/js/network.js}'></script>
    <script language='JavaScript' th:src='@{/js/common.js}'></script>
    <script language='JavaScript' th:src='@{/js/public.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/bootstrap-datetimepicker/js/moment-with-locales.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/iCheck/icheck.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/zTree_v3-master/js/jquery.ztree.core.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/zTree_v3-master/js/jquery.ztree.excheck.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js}'></script>

    <style type="text/css">
        .form-group{
            margin-top: 5px;
            margin-bottom: 5px;
        }
        #user-role-table td {
           border-left-width: 0px !important;
            border-right-width: 0px !important;
         }

        #user-role-table th {
            border-left-width: 0px !important;
            border-right-width: 0px !important;
        }

    </style>
</head>
<body class="body-contrainner fadeInUp">
<div class="box box-info">
    <div class="box-header with-border">
        <form id="form-search" class="form-inline has-info">
            <div class="form-group">
                <label class="control-label">模板名称</label>
                <input type="text" id="file_name" name="file_name@@like" class="form-control" placeholder="请输入模板名称">
            </div>
            <div class="form-group">
                <label class="control-label">模板备注</label>
                <input type="text" id="mark" name="mark@@like" class="form-control" placeholder="请输入模板备注">
            </div>
            <div class="form-group">
                <label class="control-label">模板类型</label>
                <input type="text" id="file_end_name" name="file_end_name@@eql" class="form-control" placeholder="请输入模板类型">
            </div>
            <div class="form-group">
                <label class="control-label">上传者</label>
                <input type="text" id="creater" name="creater@@eql" class="form-control" placeholder="请输入上传者">
            </div>
        </form>
        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div>
    </div>
    <div class="box-body" style="padding-top: 0px;">
        <div id="tool-bar">
            <button id="btn-search" type="button" class="btn btn-info"><i class="fa fa-search margin-r-5"></i>查询</button>
            <button id="btn-del" type="button" class="btn btn-default"><i class="fa fa-remove margin-r-5"></i>删除</button>
            <button id="btn-export" type="button" class="btn btn-default"><i class="fa fa-download margin-r-5"></i>导出</button>

            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-retweet margin-r-5"></i>上传/下载 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a id="btn-import" href="javascript:void(0);"><i class="fa fa-upload margin-r-5"></i>上传模板</a></li>
                    <li><a id="btn-download" href="javascript:void(0);"><i class="fa fa-download  margin-r-5"></i>下载模版</a></li>
                </ul>
            </div>
        </div>
        <table id="data-table" class="table table-bordered" data-striped="true" data-pagination="true" data-search="false"
               data-search-on-enter-key="true" data-show-columns="true" data-show-refresh="true"
               data-show-toggle="true" 	data-show-pagination-switch="true" data-id-field="id"
               data-unique-id="id" data-click-to-select="true" data-side-Pagination="server"
               data-cache="false" data-method="get" data-toolbar="#tool-bar" data-query-params="getParam">
            <thead>
            <tr id="tab">

            </tr>
            </thead>
        </table>
    </div>
</div>

<div id="input-modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title text-info">填写模板信息</h4>
            </div>
            <div class="modal-body">

                <form id="form-input" class="form-horizontal has-info form-validate">
                    <div class="form-group">
                        <label class="control-label col-md-2 required1">模板名称</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" disabled="true" id="file_name1" name="file_name" placeholder="模板名称" >
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-md-2 required1">模板备注</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" id="mark1" name="mark" placeholder="请输入模板备注">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="btn-cancel" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="btn-save" type="button" class="btn btn-info">保存</button>
            </div>
        </div>
    </div>
</div>


<div id="authorize-dialog"><table id="authorize-table" class="table table-striped"></table></div>
<div id="authorize-dialog-buttons" class="hide">
    <button id="btn-auth-save" type="button" class="btn btn-info">确定</button>
    <button id="btn-auth-cancel" type="button" class="btn btn-cancel">取消</button>
</div>

<div id="input-modal2" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content" style="min-width:300px;max-width: 400px;  width: 70%;" >
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <center><span  style="font-size:20px;">导出字段选择</span></center>
            </div>

            <div class="modal-body" id="messageBody" style="height:340px; overflow:scroll;text-align: center;">
                <div class="btn-group" id="checks" data-toggle="buttons" style="text-align: center;">


                </div>
            </div>
            <div class="modal-footer">
                <center>
                    <button id="btn-selectAll" type="button" class="btn btn-default" >反选</button>
                    <button id="btn-cancel2" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="btn-save2" type="button" class="btn btn-info">保存</button>
                </center>
            </div>
        </div>
    </div>
</div>



    <input id="file-input" type="file" multiple="multiple"  />
<script language="JavaScript">
    var myTableName='sys_upload_modal';
    var bootStrap={}

    $("#file-input").hide();
    $("#btn-import").click(function() {
        $("#file-input").val("");
        $("#file-input").click();
    });

    $("#file-input").change(function() {
        var files = $("#file-input").get(0).files;
        if (files.length == 0) {
            messageBox.error("请选择您要导入的文件！");
            return;
        } else if(files.length > 1){
            messageBox.error("请选择单个文件！");
            return;
        }else{
           var name=files[0].name;
           var index=name.lastIndexOf('.');
           var nameEnd=name.substr(index+1);
          // var fileName=name.substr(0,index);
           if(nameEnd!="doc"&&nameEnd!="docx"&&nameEnd!="xls"&&nameEnd!="xlsx"){
               messageBox.error("请选择Word或者Excel类型的模板！");
               return;
           }else{
               $("#file_name1").val("");
               $("#mark1").val("");
               $("#input-modal").attr("data-save-type", "add");
               $("#file_name1").val(name);
               $("#input-modal").modal("show");
           }
        }
    });

    $("#btn-save").click(function () {
        var files = $("#file-input").get(0).files;
        var name=files[0].name;
        var index=name.lastIndexOf('.');
        var nameEnd=name.substr(index+1);
        var fileName=name.substr(0,index);
        var formData =  new FormData();
        formData.append("file",$("#file-input")[0].files[0]);
        formData.append("nameEnd",nameEnd);
        var mark=$("#mark1").val();
        formData.append("mark",mark);
        formData.append("fileName",fileName);
         ajax.postFormData(publicData.urls.resource.upLoadModal,formData, function (data) {
             $("#input-modal").modal("hide");
                    if(data!=""){
                        messageBox.error(data);
                    }else{
                        messageBox.success("上传模板成功");
                        $("#data-table").bootstrapTable("refresh");
                    }
         });
    });

    $("#btn-download").click(function () {
        var datas = $("#data-table").bootstrapTable("getSelections");
        if (datas.length == 0) {
            messageBox.info("请选择要下载的模板");
            return;
        }

        ajax.postData(publicData.urls.resource.downloadCheck,{"uFileName":datas[0].uuid_file_name}, function (data) {
            if(data==""){
                window.location.href=publicData.urls.resource.download+"?fileName="+datas[0].file_name+"&uFileName="+datas[0].uuid_file_name;
                messageBox.success("文件下载成功");
            }else{
                messageBox.error(data);
            }
        });

    });


   ajax.postData(publicData.urls.system.getFields, {'tableName':myTableName}, function (data) {
           var html='<th data-field="state" data-checkBox="true">#</th>';
           html+='<th data-field="rowNum" data-align="left" data-halign="left" data-valign="middle" data-formatter="bootstrapFormatter.rowNumFormatter">序号</th>'

           for(var i = 0;i < data.length;++i){
               var codeAndInfo = data[i];
               if(codeAndInfo.column_name == "id"||codeAndInfo.column_name == "uuid_file_name"){

               }else{
                   html+='<th data-field="'+codeAndInfo.column_name+'" data-align="left" data-halign="left"'
                       +'data-valign="middle" data-sortable="true">'+codeAndInfo.column_comment+'</th>';
               }
           }
           $("#tab").html(html);
           if ( data!=null||data!="") {
               $("#data-table").bootstrapTable("refresh");
               $("#data-table").bootstrapTable({url: publicData.urls.system.getPage});
           }else{
               $("#tab").html("不存在");
           }
       });
   //这个携带页面查询参数
    function getParam(params) {
        var total=commonTools.getBootstrapParams(params, $("#form-search"))
        total.params.tableName=myTableName;
        if(total.sort==undefined){
            total.sort='create_time';
            total.order='desc';
        }
        bootStrap=total;

        return total;
    }


    $("#btn-search").click(function () {
        $("#data-table").bootstrapTable("refresh");
    });


    $("#btn-del").click(function () {
        var datas = $("#data-table").bootstrapTable("getSelections");
        if (datas.length == 0) {
            messageBox.info("请选择要删除的数据");
            return;
        }
        var ids="";
        for(var i=0;i<datas.length;i++){
            ids+=datas[i].id
            if(i==datas.length-1){

            }else{
                ids+=",";
            }
        }
        messageBox.confirm("您确认要删除该数据吗？", function(){
            ajax.postData(publicData.urls.system.del, {"id": ids,"tableName":myTableName}, function () {
                messageBox.success("删除成功");
                $("#data-table").bootstrapTable("refresh");

                ajax.postData(publicData.urls.resource.delModal, {"fileName": datas[0].uuid_file_name}, function (data) {
                    if(data!=""){
                        messageBox.error(data);
                    }
                });


            });
        }, undefined);
    });

    //==============导出模块

    $("#btn-export").click(function () {
        $("#checks").html("");
        ajax.postData(publicData.urls.system.getFields, {'tableName':myTableName}, function (data) {
            var bb="";
            for(var i = 0;i < data.length;++i){
                var codeAndInfo = data[i];
                bb+="<label class='btn btn-default' style='width: 80%;margin-bottom: 5px;margin-left: 10%;margin-right: 10%;'>"
                    +"<input  name='columnCheckBoxs'    value='"+codeAndInfo.column_name+"' type='checkbox'>"+codeAndInfo.column_comment
                    +"</label>"
            }
            $("#checks").html(bb);
        })
        $("#input-modal2").modal("show");
    })

    $("#btn-save2").click(function () {
        var obj = document.getElementsByName("columnCheckBoxs");
        var check_val =[];
        var columnStr="";
        for(var k in obj){
            if(obj[k].checked)
                columnStr+=obj[k].value+",";
        }
        columnStr=columnStr.substring(0,columnStr.length-1)
        bootStrap.columnStr=columnStr;
        var message=JSON.stringify(bootStrap);
        message=message.replace(/\{/g,"(")
        message= message.replace(/\}/g,")")
        console.log(publicData.urls.system.exportMessage)
        window.location.href=publicData.urls.system.exportMessage+"?message="+message
        $("#input-modal2").modal("hide");
        messageBox.success("删除成功");

    })

    $("#btn-selectAll").click(function () {
        $("#checks .btn").button('toggle')
    })





</script>
</body>
</html>